<template>
  <base-dialog
    title="新增能源/燃料"
    append-to-body
    destroy-on-close
    :width="460"
    :close-on-click-modal="false"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :loading="loading"
  >
    <el-form ref="formRef" :model="taskForm" :rules="obj.rules" label-position="top">
      <el-row>
        <el-col :span="24">
          <el-form-item label="能源/燃料名称：" prop="materialName">
            <el-input v-model="taskForm.materialName" maxlength="50" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="能源/燃料单位：" prop="materialUnit">
            <el-select
              multiple
              v-model="taskForm.materialUnit"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in unitList"
                :key="item.dataCode"
                :label="item.dataCode"
                :value="item.dataCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="能源/燃料单位描述：" prop="materialDesc">
            <el-input
              v-model="taskForm.materialDesc"
              type="textarea"
              show-word-limit
              maxlength="255"
              rows="2"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </base-dialog>
</template>
<script lang="ts">
export default {
  name: 'AddFuels'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch, reactive } from 'vue';
import { BaseDialog } from '@/components/BaseDialog/index';
import { useMessage } from '@/hooks/useMessage';
import * as obj from './rules';
import { addMaterial, editMaterial } from '@/apis/system/config/material';
import { getBase } from '@/apis/common/common';
import { IUnitResult } from '@/apis/common/model/commonModel';

interface SelectFillTypeDialogProps {
  visible: boolean;
  info: undefined | any;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      loadData();
    } else {
      formRef.value?.resetFields();
    }
  }
);
const loadData = () => {
  if (props.info) {
    taskForm.materialName = props.info.materialName;
    taskForm.materialUnit = props.info.materialUnit;
    taskForm.materialDesc = props.info.materialDesc;
  } else {
    init();
  }
};
const formRef = ref();
const loading = ref(false);
const { createMessage } = useMessage();
const taskForm = reactive({
  materialName: '',
  materialUnit: [],
  materialDesc: ''
});

const unitList = ref<IUnitResult[]>([]);
const loadUnitList = async () => {
  let data = await getBase('inventory:FACTOR_UNIT');
  unitList.value = data ?? [];
};
loadUnitList();
function handleConfirm() {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      loading.value = true;
      try {
        if (props.info) {
          await editMaterial({
            ...taskForm,
            materialNo: props.info.materialNo
          });
          createMessage.success('编辑能源/燃料成功！');
        } else {
          await addMaterial(taskForm);
          createMessage.success('新增能源/燃料成功！');
        }
        dialogVisible.value = false;
        init();
        emit('refresh');
      } finally {
        loading.value = false;
      }
    }
  });
}
function init() {
  loading.value = false;
  taskForm.materialName = '';
  taskForm.materialUnit = [];
  taskForm.materialDesc = '';
  formRef.value?.resetFields();
}
</script>
